import { Button } from 'antd';
import type React from 'react';
import { useRef } from 'react';
import {
  attachHeatmap,
  detachHeatmap,
  getHeatmap,
} from '@/components/MapView/Mapless/mana/heatmap';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  function onDrawHeatmap(): void {
    const hMan = attachHeatmap(maplessRef.current, 'hm1', { maxPoints: 100 });
    hMan?.drawHeatmap([
      { lng: 113.267, lat: 23.132 },
      { lng: 113.268, lat: 23.133 },
      { lng: 113.269, lat: 23.131 },
      { lng: 113.27, lat: 23.13 },
      { lng: 113.271, lat: 23.129 },
      { lng: 113.272, lat: 23.128 },
      { lng: 113.273, lat: 23.127 },
      { lng: 113.274, lat: 23.126 },
    ]);
  }

  function onUpdateHeatmap() {
    const hMan = getHeatmap(maplessRef.current, 'hm1');
    const points = Array.from({ length: 10 }, () => ({
      lng: 113.267 + (Math.random() * 0.01 - 0.005),
      lat: 23.132 + (Math.random() * 0.01 - 0.005),
    }));
    hMan?.updateHeatmap(points);
  }

  function onClearHeatmap(): void {
    detachHeatmap(maplessRef.current, 'hm1');
  }

  const hManIntervalRef = useRef<NodeJS.Timeout>(undefined);
  const onStartUpdateHeatmap = () => {
    const hMan = getHeatmap(maplessRef.current, 'hm1');
    hManIntervalRef.current = setInterval(() => {
      const points = Array.from({ length: 10 }, () => ({
        lng: 113.267 + (Math.random() * 0.05 - 0.025),
        lat: 23.132 + (Math.random() * 0.05 - 0.025),
      }));
      hMan?.updateHeatmap(points);
    }, 20);
  };
  const onStopUpdateHeatmap = () => {
    clearInterval(hManIntervalRef.current);
    hManIntervalRef.current = undefined;
  };

  return (
    <div className={styles.test}>
      <Button onClick={onDrawHeatmap}>绘制热图</Button>
      <Button onClick={onUpdateHeatmap}>更新热图</Button>
      <Button onClick={onStartUpdateHeatmap}>开始更新热图</Button>
      <Button onClick={onStopUpdateHeatmap}>停止更新热图</Button>
      <Button onClick={onClearHeatmap}>删除热图</Button>
    </div>
  );
};

export default Index;
